<template>
	<view class="container">
		<u-loading-page bg-color="rgba(0, 0, 0, 0.8)" :loading-text="loadingText" :loading="loading" font-size="15"
			style="z-index: 99;" loading-mode="spinner" loading-color="#409EFF" color="#409EFF"></u-loading-page>
		<div class="upload-area">
			<div class="tips">
				<image src="/static/icon/fundus.png" alt="" class="tips-icon"></image>
				<text class="tips-text">上传左眼眼底图像</text>
			</div>
			<u-upload class="upload-element" :fileList="fileListLeft" @afterRead="afterRead" name="left" :maxCount="2"
				:previewImage="false">
				<div class="upload-inner">
					<image src="/static/image/left_eye.png" mode="widthFix" style="width: 50px;height: 50px"></image>
					<div class="upload-text"><u--text type="primary" text="点击图标"></u--text>上传左眼眼底图像</div>
				</div>
			</u-upload>
			<div class="tips">
				<image src="/static/icon/fundus.png" alt="" class="tips-icon"></image>
				<text class="tips-text">上传右眼眼底图像</text>
			</div>
			<u-upload class="upload-element" :fileList="fileListRight" @afterRead="afterRead" name="right" :maxCount="2"
				:previewImage="false">
				<div class="upload-inner">
					<image src="/static/image/right_eye.png" mode="widthFix" style="width: 50px;height: 50px"></image>
					<div class="upload-text"><u--text type="primary" text="点击图标"></u--text>上传右眼眼底图像</div>
				</div>
			</u-upload>
			<div class="submit-btn">
				<div class="submit-btn-inner">
					<u-button type="success" text="开始诊断" size="small" @click="startDignosis"></u-button>
					<u-button type="error" text="重置" size="small" style="margin-left: 20px;" @click="reset"></u-button>
				</div>
			</div>
		</div>
		<div class="divier">
			<u-line dashed></u-line>
		</div>
		<div class="tips">
			<image src="/static/icon/model_predict.png" alt="" class="tips-icon"></image>
			<text class="tips-text">模型识别结果如下</text>
			<u--text type="info" text="(所患病症症状及就诊建议)" v-show="showDetail" @click="showSolutions = true"></u--text>
		</div>
		<view class="charts-box">
			<qiun-data-charts type="column" :chartData="chartData" />
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="showSolutions" title="患病情况及就诊建议" @confirm="showSolutions = false">
			<view class="slot-content">
				<rich-text :nodes="modalContent"></rich-text>
			</view>
		</u-modal>

		<u-modal :show="showGatherInfo" title="信息采集" @confirm="confirmGatherInfo" :showCancelButton="true"
			@cancel="showGatherInfo = false;">
			<view class="slot-content">
				<div v-if="agreeGatherInfo === false">
					<u--text text="我们希望花1~2分钟采集您的信息,以帮助更多的患者,您的私密信息将不会涉及填写." :bold="true"></u--text>
				</div>
				<div v-else>
					<u--form labelPosition="left" :model="infoForm">
						<u-form-item label="年龄" borderBottom>
							<u--input v-model="infoForm.age" border="none" placeholder="请输入您的年龄"></u--input>
						</u-form-item>
						<u-form-item label="性别" borderBottom>
							<u-radio-group v-model="infoForm.gender" placement="row">
								<u-radio label="男" name="男"></u-radio>
								<u-radio label="女" name="女" :customStyle="{marginLeft: '8px'}">
								</u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item label="症状">
							<u--textarea v-model="infoForm.description" placeholder="请输入您在患病期间所感到的不适"></u--textarea>
						</u-form-item>
					</u--form>
				</div>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		singleDiagnosis,
		enhanceImage,
		submitInfo
	} from '../../../api/dignosis';
	import {
		getUserInfo
	} from '../../../api/login';
	export default {
		data() {
			return {
				// 用户信息
				nowUser: '',
				// 是否同意采集信息
				agreeGatherInfo: false,
				showGatherInfo: false,
				// 所患病症及解决方案
				modalContent: '',
				showSolutions: false,
				// 是否显示所换症状及解决方案
				showDetail: false,
				// 全局加载显示的文本
				loadingText: '',
				// 全局加载
				loading: false,
				fileListLeft: [],
				fileListRight: [],
				chartData: {},
				infoForm: {
					age: '',
					gender: '',
					description: '',
					leftFundus: '',
					rightFundus: '',
					result: '',
					username: ''
				},
				barData: {
					categories: ["N", "D", "G", "C", "A", "H", "M", "O"],
					series: [{
						name: "预测结果(为1代表患病，0代表未患病)",
						data: [0, 0, 0, 0, 0, 0, 0, 0]
					}]
				},
				form: {
					leftFilename: '',
					rightFilename: '',
					description: '',
				},
				indexToDisease: {
					1: '糖尿病',
					2: '青光眼',
					3: '白内障',
					4: 'AMD',
					5: '高血压',
					6: '近视',
					7: '其他疾病/异常'
				},
				indexToFeature: {
					1: '糖尿病视网膜病变（DR）是糖尿病最常见的微血管并发症之一，是慢性进行性糖尿病导致的视网膜微血管渗漏和阻塞从而引起一系列的眼底病变，如微血管瘤、硬性渗出、棉絮斑、新生血管、玻璃体增殖、黄斑水肿甚至视网膜脱离。DR以是否有从视网膜发出的异常新生血管作为判断标准，可分为增殖性糖尿病视网膜病变和非增殖性糖尿病视网膜病变。',
					2: '青光眼的眼底表现，要看具体的分型。如果是闭角型的青光眼，特别是急性闭角型青光眼，眼底表现跟正常人没有太大的差别。但如果是慢性闭角型青光眼，眼底还是有一些特征性的改变，比如说眼底的杯盘比的变化、盘沿的变化，甚至凹陷的变化，都可以通过检查发现。对于晚期的青光眼，眼底的表现比较明显，视神经的苍白、萎缩、杯盘比的扩大、盘沿的极度变窄、凹陷很深，是青光眼的凹陷的表现。',
					3: '白内障的眼底特征主要与晶状体的混浊程度和部位有关,正常眼底的视神经盘、血管等结构清晰可见。而白内障患者的眼底成像会因晶状体混浊而变得模糊,白内障发展过程中，眼底成像的对比度可能下降，血管和视神经盘的细节逐渐丢失。',
					4: '干性AMD眼底表现包括玻璃膜疣、脉络膜视网膜萎缩灶、和视网膜色素上皮细胞的改变。 湿性AMD眼底表现包括视网膜水肿和局部隆起，视网膜色素上皮脱离，黄斑下灰绿色变色，和黄斑内及其周围渗出物。',
					5: '原发性高血压性视网膜病变是由于高血压引起的，以视网膜动脉收缩乃至视网膜、视乳头病变为主要表现，在视乳头周围约4~6乳头直径的部位上，以视网膜灰色水肿，小动脉中心反射增强，动静脉交叉征，鲜红色火焰状出血，棉絮状白斑，黄白色发亮的硬性渗出及黄斑星状图谱为主要特征。',
					6: '高度近视的眼底的特征性改变是豹纹状眼底，脉络膜萎缩斑，黄斑区的出血和视网膜脉络膜新生血管，视网膜周边的格子样变性，干性裂孔。高度近视的眼球的长度较正常人的长。眼球向后扩张，发生视网膜色素上皮和脉络膜毛细血管层萎缩，导致脉络膜的大血管比较明显，称为豹纹状眼底。',
					7: '所患为其他疾病，建议线下就医。'
				},
				indexToSoultion: {
					1: `<h4>基本治疗</h4><p>控制血糖：严格控制血糖水平是关键，需将血糖控制在正常或接近正常水平,</p><p>控制血压：将血压维持在120/80 mmHg以下，可使视网膜出血风险降低41%。推荐选择ARB类降压药（如缬沙坦），这类药物兼具改善视网膜血流的作用</p><p>健康饮食：保持“视网膜友好型”饮食，包含Ω-3脂肪酸（每周3次深海鱼）、叶黄素（每日1个鸡蛋+200g菠菜）和锌元素（每日10g南瓜籽）。</p><p>规律运动：尽量每周进行至少150分钟的适度有氧运动，如走步。</p><h4>就诊医院</h4><p>您可以去最近的眼科医院，以下是治疗糖尿病视网膜病变最好的前3家医院：中山大学中山眼科中心，首都医科大学附属北京同仁医院，复旦大学附属眼耳鼻喉科医院。</p><h4>就诊科室</h4><p>糖尿病视网膜病变主要就诊于眼科，尤其是眼底病专科。</p><h4>推荐医生</h4><p>推荐您可以找以下医生进行治疗：王红主任医师（山东大学齐鲁医院眼科）,田蓓主任医师（北京同仁医院眼底病科）,陈有信主任医师（北京协和医院眼科）。</p>`,
					2: '<h4>基本治疗</h4><p>保持良好的生活习惯：保证充足的睡眠，避免熬夜，保持规律的作息时间</p><p>定期随访：青光眼是一种需要长期管理的疾病，要按医嘱定期随访，终身治疗</p><p>饮食清淡：避免高脂肪、高糖食物，多吃富含维生素的食品，如蔬菜、水果、粗粮等。同时，保持大便通畅，少吃或不吃刺激性食物</p><p>增加维生素和粗纤维摄入：多吃富含维生素A、B、C、E和粗纤维的食物，如猪肝、鱼、肉、粗粮、植物油等</p><h4>就诊医院</h4><p>您可以去到最近的眼科医院，以下是治疗青光眼最好的前3家医院：中山大学中山眼科中心，上海市第一人民医院（北部），上海市五官科医院。</p><h4>就诊科室</h4><p>青光眼患者应前往眼科就诊，部分医院设有专门的青光眼专科或青光眼与视神经疾病学科</p><h4>推荐医生</h4><p>推荐您可以找以下医生进行治疗：张秀兰主任医师教授（中山大学中山眼科中心），王海燕主任医师（上海市第一人民医院），孔祥梅主任医师（上海市五官科医院）。</p>',
					3: '<h4>基本治疗</h4><p>眼部护理：避免长时间暴露在强光下，外出时佩戴防紫外线眼镜。注意眼部卫生，避免用手揉眼睛</p><p>避免强光刺激：外出时可戴太阳镜或宽边帽，减少眩光</p><p>多摄入抗氧化食物：多吃富含维生素C、E和叶黄素的食物，如深色蔬菜、坚果、鱼类、蓝莓、菠菜、胡萝卜等</p><p>补充锌和蛋白质：适量食用富含锌的食物，如青鱼、瘦肉、花生、核桃、牡蛎等。同时，保证足够的蛋白质摄入</p><h4>就诊医院</h4><p>您可以去到最近的眼科医院，以下是治疗白内障最好的前3家医院：中山大学中山眼科中心，北京同仁医院，温州医科大学附属眼视光医院</p><h4>就诊科室</h4><p>白内障患者应前往眼科就诊，部分医院设有专门的白内障专科或白内障与晶状体疾病学科，</p><h4>推荐医生</h4><p>推荐您可以找以下医生进行治疗：季樱红主任医师（上海市五官科医院白内障与晶状体疾病学科），周民稳主任医师（上海市第一人民医院眼科），王海燕主任医师（上海市第一人民医院眼科）。</p>',
					4: '<h4>基本治疗</h4><p>健康饮食：多吃富含抗氧化剂的食物，如深绿色蔬菜（羽衣甘蓝、菠菜）、水果、坚果和鱼类。地中海饮食模式对AMD有益，其特点是高摄入蔬菜、水果、全谷物、豆类、橄榄油和鱼类，低摄入红肉和加工肉类</p><p>控制体重和运动：保持健康体重，定期进行适度运动，如散步、游泳等</p><p>增加抗氧化剂摄入：富含叶黄素和玉米黄质的食物（如菠菜、羽衣甘蓝）、富含维生素C的食物（如柑橘类水果、草莓）、富含维生素E的食物（如坚果、种子）</p><p>摄入ω-3脂肪酸：如鲑鱼、金枪鱼、核桃等，有助于降低晚期AMD风险</p><h4>就诊医院</h4><p>您可以去到最近的眼科医院，同时您可以去到最近的眼科医院，以下是治疗AMD最好的前3家医院：北京同仁医院，厦门大学附属厦门眼科中心，上海市第一人民医院</p><h4>就诊科室</h4><p>AMD患者应前往眼科就诊，尤其是眼底病专科</p><h4>推荐医生</h4><p>推荐您可以找以下医生进行治疗：魏文斌教授（北京同仁医院），黎晓新教授（厦门大学附属厦门眼科中心），肖泽锋主任（武汉市第一医院）。</p>',
					5: '<h4>基本治疗</h4><p>控制血压：遵医嘱按时服药，定期监测血压，保持血压稳定</p><p>适度运动：选择散步、慢跑、游泳、太极拳等中等强度的运动，每周至少150分钟，避免剧烈运动导致血压波动</p><p>低脂饮食：减少动物脂肪摄入，选择植物油如橄榄油、玉米油等，避免油炸食品和高脂肪肉类</p><p>低盐饮食：每日盐摄入量控制在5克以内，避免食用咸菜、腌肉等高盐食品</p><h4>就诊医院</h4><p>您可以去到最近的眼科医院，以下是治疗高血压最好的前3家医院：北京协和医院，武汉大学人民医院，山东大学齐鲁医院</p><h4>就诊科室</h4><p>高血压视网膜病变通常需要到眼科就诊，尤其是眼底病专科。如果病情复杂，可能还需要与心血管内科协作，以更好地控制血压</p><h4>推荐医生</h4><p>推荐您可以找以下医生进行治疗：封康副主任医师（北医三院眼科），王红主任医师（山东大学齐鲁医院眼科），邢怡桥主任医师（武汉大学人民医院眼科中心）</p>',
					6: '<h4>基本治疗</h4><p>用眼习惯：遵循“20-20-20”法则，即每用眼20分钟，休息20秒，远眺20英尺（约6米）的地方。避免长时间近距离用眼，保持适当的阅读距离，确保光线充足</p><p>户外活动：增加户外活动时间，每天至少2-3小时，让眼睛接触自然光线，有助于预防近视</p><p>增加营养摄入：多吃富含维生素A、C、E和Omega-3脂肪酸的食物，如胡萝卜、菠菜、鸡蛋、深海鱼等。这些营养素有助于保护眼睛，增强夜间视力，同时能预防干眼症</p><p>补充钙和锌：钙和锌对眼睛健康很重要，可以通过食用鱼类、豆制品、坚果等食物来补充</p><h4>就诊医院</h4><p>您可以去到最近的眼科医院，以下是治疗近视最好的前3家医院：浙江大学医学院附属第二医院（杭州）,复旦大学附属眼耳鼻喉科医院（上海）,上海市第一人民医院（上海）</p><h4>就诊科室</h4><p>近视患者通常需要前往眼科就诊，部分医院设有专门的视光科或屈光科，专门处理近视、远视、散光等屈光问题</p><h4>推荐医生</h4><p>推荐您可以找以下医生进行治疗：余克明主任医师（中山大学中山眼科中心），翟长斌主任医师（首都医科大学附属北京同仁医院），周行涛主任医师（复旦大学附属眼耳鼻喉科医院）</p>',
					7: '成因不明，建议线下前往最近眼科医院进行就医。'
				},
				indexToSolutionDoctor: {
					1: '<h4>就诊前准备:</h4><p>整理病史资料：简要总结糖尿病病史，包括确诊时间、既往和当前服用的糖尿病治疗药物、最近的平均血糖水平以及最近几次血红蛋白A1C读数（如果知晓）。</p><p>记录症状：详细记录眼部症状，如视力下降、视物模糊、眼前黑影飘动、视野缺损等，以及出现的时间和频率。</p><h4>就诊时沟通:</h4><p>询问病情和预后：了解糖尿病视网膜病变对视力的潜在影响，询问病变的严重程度、是否可逆以及可能的发展趋势，</p><p>探讨治疗方案：与医生讨论可提供的治疗方法，如激光治疗、抗VEGF治疗、玻璃体手术等，并了解每种方法的适应证、疗效、风险和预期效果。</p><h4>就诊后自我管理：</h4><p>严格控制血糖：在内分泌科医生指导下，科学、平稳地控制血糖，避免血糖波动过大。同时，重视血压和血脂的管理，因为这些因素也会影响视网膜病变的进展</p>',
					2: '<h4>就诊前准备:</h4><p>症状记录：详细记录症状出现的时间、频率、持续时间，以及是否与情绪波动、长时间用眼、黑暗环境等有关。</p><p>病史整理：梳理个人和家族的眼部疾病史、全身疾病史（如高血压、糖尿病等）及用药情况。<p>配合检查：眼压测量：是诊断青光眼的重要指标之一，但需注意眼压正常也不能完全排除青光眼。</p><p>前房角检查：通过前房角镜检查前房角的宽窄、开放程度，帮助判断青光眼的类型。</p><h4>明确诊断后治疗：</h4><p>药物治疗：医生可能会根据病情开具降眼压药物，如前列腺素类药物、β受体阻滞剂、碳酸酐酶抑制剂等，严格按照医嘱使用，注意观察药物的疗效和不良反应。</p><p>激光治疗：对于部分青光眼患者，如房角狭窄或闭角型青光眼早期患者，激光虹膜切开术或激光周边虹膜成形术等激光治疗可能有效。</p>',
					3: '<h4>就诊前准备:</h4><p>就诊前准备：观察患者是否有以下症状：视力逐渐模糊,看东西重影、复视,老花眼突然好转等。</p><h4>就诊时准备：</h4><p>可以做以下检查：视力检查，裂隙灯检查，眼压测试，光学断层扫描（OCT）</p><h4>术后护理：</h4><p>遵医嘱使用滴眼液，预防感染，定期复查，观察恢复情况，注意眼部卫生，避免用力揉眼。</p>',
					4: '<h4>就诊前准备:</h4><p>观察患者症状：如果出现视物模糊、视物变形（如直线变弯）、视野中心出现暗点、视力下降等症状，尤其是年龄超过50岁的人群，应尽快前往医院眼科就诊。</p><h4>检查项目：</h4><p>眼底检查：包括眼底照相、光学相干断层扫描（OCT）和OCT血管成像（OCTA），用于评估黄斑区的结构变化</p><p>荧光素眼底血管造影（FFA）：用于诊断新生血管性AMD（nAMD），明确病变范围和类型。</p><h4>明确治疗方案：</h4><p>早至中期AMD：补充营养素：建议补充抗氧化维生素（维生素C、维生素E）、矿物质（锌、铜）、叶黄素和玉米黄质，有助于延缓疾病进展。</p><p>晚期AMD：干性AMD：目前尚无特效药物，可继续补充营养素以延缓地图样萎缩（GA）的进展。预防与随访：定期复查</p>',
					5: '<h4>就诊前准备:</h4><p>观察患者症状：如果出现视力模糊、眼前黑影飘动、视野缺损、突发头痛、恶心等症状，尤其是合并高血压病史的患者，应立即前往医院眼科就诊。</p><h4>检查项目：</h4><p>眼底检查：包括眼底照相、散瞳检查、光学相干断层扫描（OCT）和荧光素眼底血管造影（FFA）等，用于评估视网膜血管和视神经的病变情况。</p><p>血压监测：定期监测血压，评估血压控制情况，了解血压波动对眼底病变的影响，</p><h4>明确治疗方案：</h4><p>控制血压：积极控制血压是关键，普通高血压患者血压应控制在＜140/90 mmHg，合并糖尿病或肾病者应控制在＜130/80 mmHg，</p><p>药物治疗：根据眼底病变情况，可能需要使用降压药、抗VEGF药物（如雷珠单抗）、皮质类固醇等，预防与随访：定期复查</p>',
					6: '<h4>就诊前准备:</h4><p>观察患者症状：如果出现以下症状，尤其是高度近视（≥600度）患者，应尽快前往医院眼科就诊。<h4>检查项目：</h4><p>视力下降：近视度数持续加深，或视力突然下降，视物变形：如视野中出现黑影、闪光感、视物变形（直线变弯）。</p><h4>检查方式：</h4><p>视力检查：评估视力受损程度。</p><p>眼底检查：包括眼底照相、散瞳检查，观察视网膜、脉络膜和视神经的病变情况。</p><p>光学相干断层扫描（OCT）：用于检测视网膜厚度、黄斑区结构变化。</p><h4>明确诊断后的治疗建议：</h4><p>药物治疗：控制近视进展：对于青少年近视患者，可使用低浓度阿托品滴眼液（0.01%）延缓近视加深。</p><p>手术治疗：屈光手术：对于近视度数稳定（2年内度数变化≤50度）且无眼底病变的患者，可考虑激光角膜切削术（如全飞秒、半飞秒）或人工晶状体植入术（如ICL）。</p>',
					7: '成因不明，应从多个角度考虑患者所患疾病。'
				},
			}
		},
		onReady() {
			this.getInitData();
			getUserInfo().then((res) => {
				this.nowUser = res.data;
			})
		},
		methods: {
			reset() {
				this.fileListLeft = []
				this.fileListRight = []
				this.form.description = ''
			},
			// 新增图片
			async afterRead(event) {
				if (event.name === 'left') {
					if (this.fileListLeft.length >= 1) {
						this.$refs.uToast.show({
							type: 'error',
							message: "最多只能上传一个文件",
							position: "top"
						});
						return;
					}
					this.fileListLeft.push(event.file)
				} else {
					if (this.fileListRight.length >= 1) {
						this.$refs.uToast.show({
							type: 'error',
							message: "最多只能上传一个文件",
							position: "top"
						});
						return;
					}
					this.fileListRight.push(event.file)
				}

				// 上传至本地后端
				uni.uploadFile({
					url: `https://yiyuy.mynatapp.cc/model/uploadImage?sign=${event.name}`,
					filePath: event.file.url,
					name: "file",
					success: (res) => {
						if (res.statusCode === 200) {
							const obj = JSON.parse(res.data)
							if (obj.code === 200) {
								this.$refs.uToast.show({
									type: 'success',
									message: "文件上传成功",
									position: "top"
								});
								if (event.name === 'left') {
									this.form.leftFilename = obj.data.filename
								} else {
									this.form.rightFilename = obj.data.filename
								}
							} else {
								this.$refs.uToast.show({
									type: 'error',
									message: "文件上传失败",
									position: "top"
								});
							}
						} else {
							this.$refs.uToast.show({
								type: 'error',
								message: "请求失败",
								position: "top"
							});
						}
					}
				})

				// 同时上传到autodl
				// 上传至本地后端
				uni.uploadFile({
					url: `http://yiyuy.nat300.top/uploadImage`,
					filePath: event.file.url,
					name: "file",
					success: (res) => {
						if (res.statusCode === 200) {
							const obj = JSON.parse(res.data)
							if (obj.code !== 200) {
								this.$refs.uToast.show({
									type: 'error',
									message: "文件上传至AUTODL失败",
									position: "top"
								});
							}
						}
					}
				})
			},
			// 点击收集信息模态框 
			confirmGatherInfo() {
				if (this.agreeGatherInfo === false) {
					this.agreeGatherInfo = true;
				} else {
					if (this.infoForm.age === '') {
						this.$refs.uToast.show({
							type: 'warning',
							message: "请先填写年龄",
							position: "top"
						});
						return;
					}

					if (this.infoForm.gender === '') {
						this.$refs.uToast.show({
							type: 'warning',
							message: "请先选择性别",
							position: "top"
						});
						return;
					}

					if (this.infoForm.description === '') {
						this.$refs.uToast.show({
							type: 'warning',
							message: "请先填写患病期症状",
							position: "top"
						});
						return;
					}

					this.infoForm.username = this.nowUser.username;

					// 构造result
					for (let i = 0; i < this.barData.series[0].data.length; i++) {
						this.result += this.indexToDisease[i] + ','
					}

					// 左右眼图像上传至oss
					let fileList = []
					fileList.push(this.fileListLeft[0])
					fileList.push(this.fileListRight[0])

					for (let i = 0; i < fileList.length; i++) {
						uni.uploadFile({
							url: 'https://yiyuy.mynatapp.cc/info/imageToOSS',
							filePath: fileList[i].url,
							name: "file",
							success: (response) => {
								if (response.statusCode === 200) {
									const obj = JSON.parse(response.data)
									if (i === 0) {
										this.infoForm.leftFundus = obj.data;
									} else {
										this.infoForm.rightFundus = obj.data;
										// 两张图片均上传完毕 开始上传信息到数据库
										submitInfo(this.infoForm).then((res) => {
											if (res.code === 200) {
												this.$refs.uToast.show({
													type: 'success',
													message: "信息提交成功，您的信息将会帮助更多患者！",
													position: "top"
												});
												this.showGatherInfo = false;
												this.agreeGatherInfo = false;
												this.infoForm = {
													age: '',
													gender: '',
													description: '',
													leftFundus: '',
													rightFundus: '',
													result: '',
													username: ''
												}
											} else {
												this.$refs.uToast.show({
													type: 'error',
													message: "信息提交失败",
													position: "top"
												});
											}
										})
									}
								}
							}
						})
					}
				}
			},
			getInitData() {
				let that = this
				setTimeout(() => {
					this.chartData = JSON.parse(JSON.stringify(that.barData));
				}, 500);
			},
			startDignosis() {
				if (this.fileListLeft.length === 0 || this.fileListRight.length === 0) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "请先上传文件",
						position: "top"
					});
					return;
				}

				if (this.form.leftDescription === '' || this.form.rightDescription === '') {
					this.$refs.uToast.show({
						type: 'warning',
						message: "请选择疾病关键词",
						position: "top"
					});
					return;
				}
				let threshold = 0.7
				this.loading = true;
				this.loadingText = 'LLAVA生成图片描述中...'
				uni.request({
					url: 'http://yiyuy.nat300.top/getImageDescription',
					method: 'post',
					data: this.form,
					success: (llavaResponse) => {
						this.loadingText = '亮度增强网络努力工作中...'
						this.form.description = llavaResponse.data.data
						enhanceImage(this.form).then((response) => {
							this.loadingText = '多模态模型努力预测中...'
							if (response.code === 200) {
								singleDiagnosis(this.form).then((res) => {
									console.log(res)
									if (res.code === 200) {
										this.loading = false
										this.$refs.uToast.show({
											type: 'success',
											message: "单次检测成功",
											position: "top"
										});
										let sum = 0;
										for (let i = 0; i < res.data.length; i++) {
											if (res.data[i].prob >= threshold) {
												this.barData.series[0].data[i] = 1;
												sum++;
											} else {
												this.barData.series[0].data[i] = 0;
											}
										}
										// 只有第一个N为1 其他为0才不显示所换症状及解决方案
										if (sum === 1 && this.barData.series[0].data[0] ===
											1) {
											this.showDetail = false;
										} else {
											this.showDetail = true;
											// 否则 给出建议
											for (let i = 0; i < this.barData.series[0].data
												.length; i++) {
												if (this.barData.series[0].data[i] === 1) {
													this.modalContent += '<br/>'
													this.modalContent += '<h1>' + this
														.indexToDisease[i] + '</h1>'
													this.modalContent += '<h2>疾病特征</h2>'
													this.modalContent += this.indexToFeature[
														i] + '<br/>'
													this.modalContent += '<h2>就诊建议</h2>'
													if (this.nowUser.role === 0) {
														this.modalContent += this
															.indexToSoultion[i]
													} else {
														this.modalContent += this
															.indexToSolutionDoctor[i]
													}
												}
											}

											// 过2秒 跳出弹窗采集信息
											let that = this;
											setTimeout(() => {
												that.showGatherInfo = true;
											}, 2000)
										}

										this.chartData = JSON.parse(JSON.stringify(this
											.barData));
									}
								})
							} else {
								this.$refs.uToast.show({
									type: 'error',
									message: response.message,
									position: "top"
								});
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	@keyframes moveIn {
		0% {
			opacity: 0;
			transform: translateY(12px);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.upload-area {
		width: 100%;
		display: flex;
		flex-direction: column;
		height: 45%;
		animation: moveIn .3s cubic-bezier(.4, 0, .2, 1) forwards;
	}

	.tips {
		display: flex;
		align-items: center;
		animation: moveIn .3s cubic-bezier(.4, 0, .2, 1) forwards;
	}

	.tips-icon {
		width: 30px;
		height: 30px;
	}

	.tips-text {
		font-size: 14px;
		font-weight: bold;
	}

	.upload-element {
		margin: 0 auto;
		width: 95%;
		height: 40%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 1px dashed black;
		background-color: #f4f5f7;
		border-radius: 5px;
	}

	.upload-inner {
		width: 700rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.upload-text {
		display: flex;
	}

	.submit-btn {
		width: 100%;
		margin-top: 10px;
	}

	.submit-btn-inner {
		width: 50%;
		margin: 0 auto;
		display: flex;
	}

	.divier {
		margin-top: 10px;
		width: 100%;
		animation: moveIn .3s cubic-bezier(.4, 0, .2, 1) forwards;
	}

	.charts-box {
		width: 100%;
		height: 100%;
		animation: moveIn .3s cubic-bezier(.4, 0, .2, 1) forwards;
	}

	.popup-box {
		height: 300px;
		overflow-y: scroll;
	}
</style>